<template>
	<view class="pages">
		<!-- 头部 -->
		<page_head>新用户权益</page_head>
		
		<!-- 主体 -->
		<view class="index_main">
			
			<view class="initNoData" v-if="coupon.length == 0">暂无数据~</view>
			<view class="couponList" v-else>
				<view class="couponList-item" v-for="(item,index) in coupon" :key="index">
					<view class="couponList-bg">优惠</view>
					<view class="couponList-titlebox">
						<view class="title">{{ item.couponName  }}</view>
						<view class="time">{{ item.couponDesc  }}</view>
						<view class="tips"><text class="red">￥{{ item.price  }}</text></view>
					</view>
					<view class="couponList-btn" @tap="goBug(item.id,item.price)">立即购买</view>
				</view>
				<!-- <view class="couponList-tips" v-if="coupon.length != 0">注意：所有优惠券下月初失效</view> -->
			</view>
			
			
		</view>
		
	</view>
</template>

<script>
	import page_head from '@/components/page_head.vue'
	export default {
		components:{
			page_head
		},
		data(){
			return{
				active: 0,
				coupon: [],
			}
		},
		onLoad() {
		},
		onShow() {
			let isLogin = uni.getStorageSync('LOGIN_STATUS') != '';
			if(isLogin){
				this.init();
			}
		},
		methods: {
			init(){
				this.getList();
			},
			// 购买优惠券
			goBug(id,price ){
				let that = this;
				uni.showLoading({title:"加载中"});
				let couponNewQo = {
					"id": id,
					"price": price,
				}
				that.$Ajax('/coupon/buy',couponNewQo,res => {
					if (res.code == 200) {
						that.weixinPay(res.data);
					}else{
						that.$tools.toast(res.msg);
						uni,hideLoading();
					}
				},err => {
					uni,hideLoading();
				})
			},
			// 微信支付
			weixinPay(res){
				let that = this;
				//获取openid
				let openid=uni.getStorageInfoSync('openId');
				if(!openid){
					that.$tools.toastJump('请选授权登录','/pages/firtPage/firtPage');
				}
				//发起支付
				uni.requestPayment({
					provider: 'wxpay',
					appId: that.$url.appId, //小程序Appid
					timeStamp:String(res.timeStamp) , //创建订单时间戳
					nonceStr: res.nonceStr,
					partnerid: res.mchId,
					package: res.packageStr, // 订单包
					signType: res.signType , // 加密方式统一'MD5'
					paySign: res.paySign, // 后台支付签名返回
					//成功
					success:(res)=>{
						uni.hideLoading();
						that.$tools.toastJump('支付成功','/pagesMain/index/index');
					},
					//失败
					fail: (res) => {
						console.log("支付失败res：",res);
						that.$tools.toast('支付失败');
						uni.hideLoading();
					},
				})
			},
			// 查询新用户权益优惠券列表
			getList(){
				let that = this;
				uni.showLoading({title:"加载中"});
				that.$Ajax('/coupon/newList',{},res => {
					if (res.code == 200) {
						that.coupon = res.data.list;
						uni.hideLoading();
						console.log("coupon：",that.coupon);
					}
				},err =>{
					
				},'GET')
			},
			lower(e) {
				console.log("ddd")
				if (this.pageNum >= this.pages) {
					return this.$tools.toast('到底了');
				} else {
					this.pageNum++;
					console.log("+++")
					// this.getLsit();
				}
			},
			checkType(index){
				if(this.active != index){
					this.active = index;
				}
			},
		},
		onPullDownRefresh() {
			console.log('refresh');
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		}
	}
</script>

<style lang="scss" scoped>
	.typeTab{
		background: $globalColor-white;
		position: fixed;
		z-index: 2;
		width: 100%;
		&-box{
			width: 100%;
			@include flexBetween;
			padding: 60rpx 30rpx 30rpx;
		}
		&-item{
			@include flexCenter;
			width: 50%;
		}
		&-title{
			font-size: 32rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #888B95;
			position: relative;
			&--active{
				color: $globalColor-fontStyle;
				&::before{
					content: '';
					width: 44rpx;
					height: 6rpx;
					background: $globalColor-style;
					position: absolute;
					bottom: -20rpx;
					left: 0;right: 0;
					margin: auto;
				}
			}
		}
	}
	.couponList{
		@include flexLeftColumn;
		// padding-top: 140rpx;
		&-item{
			background: $globalColor-white;
			margin: 20rpx 30rpx 0rpx;
			padding: 30rpx 38rpx;
			@include flexLeft;
			position: relative;
			width: 92%;
		}
		&-bg{
			background: url($uni-static-dir+'/images/coupon-bg.png');
			background-size: 100% 100%;
			background-repeat: no-repeat;
			font-size: 34rpx;
			font-family: DingTalk JinBuTi-Regular, DingTalk JinBuTi;
			font-weight: 400;
			color: #E9382E;
			padding: 15rpx 35rpx 68rpx 35rpx;
			white-space: nowrap;
		}
		&-titlebox{
			@include flexLeftColumn;
			margin:  0 48rpx 0 20rpx;
			width: 320rpx;
			.title{
				font-size: 30rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: $globalColor-fontStyle;
				white-space: nowrap;
			}
			.time{
				font-size: 22rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #888B95;
				margin: 5rpx 0 10rpx;
			}
			.tips{
				font-size: 22rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #888B95;
				@include initMoreLine(1);
			}
			.red{
				font-size: 32rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #F3354C;
			}
		}
		&-btn{
			position: absolute;
			bottom: 30rpx;
			right: 30rpx;
			font-size: 24rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: $globalColor-fontStyle;
			padding: 10rpx 15rpx;
			background: #AD2926;
			border-radius: 10rpx 10rpx 10rpx 10rpx;
			white-space: nowrap;
			&--grey{
				background: #BBBBBB;
				color: #EFEFEF;;
			}
		}
		&-tips{
			font-size: 28rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #888B95;
			text-align: center;
			margin: auto;
			// position: absolute;
			// bottom: 150rpx;
			// left: 0;right: 0;
		}
	}
</style>